<template>
  <div class="left-menu" :class="{close:!menuExpand}">
    <el-menu
        :collapse="!menuExpand"
        text-color="#fff"
        active-text-color="#409eff"
        background-color="#304156"
        :default-active="defaultMenuActive"
        class="el-menu-vertical-demo"
        @select="handleClick"
        :collapse-transition="false"
        :default-openeds="['/admin','/setting']"
    >
      <el-sub-menu index="/admin">
        <template #title>
          <el-icon>
            <school/>
          </el-icon>
          <span>酒店房间管理</span>
        </template>
        <el-menu-item index="/admin">
          <el-icon>
            <memo/>
          </el-icon>
          <span>房间管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/type">
          <el-icon>
            <memo/>
          </el-icon>
          <span>房间类型管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/order">
          <el-icon>
            <memo/>
          </el-icon>
          <span>预定信息管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/config" v-role="['ADMIN']">
          <el-icon>
            <setting/>
          </el-icon>
          <span>相关配置</span>
        </el-menu-item>

      </el-sub-menu>

      <el-sub-menu index="/setting">
        <template #title>
          <el-icon>
            <setting/>
          </el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/admin/user">
          <el-icon>
            <user/>
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>


        <el-menu-item index="/admin/password">
          <el-icon>
            <lock/>
          </el-icon>
          <span>修改密码</span>
        </el-menu-item>
      </el-sub-menu>


    </el-menu>
  </div>
  <div class="right-content" :class="{close:!menuExpand}">
    <div class="header-container">
      <div class="left-wrap">
        <el-icon size="22px" v-if="!menuExpand" color="#333" style="cursor: pointer" @click="onclickExpand">
          <expand/>
        </el-icon>
        <el-icon size="22px" v-if="menuExpand" color="#333" style="cursor: pointer" @click="onclickFold">
          <fold/>
        </el-icon>
      </div>
      <div class="right-wrap">
        <div class="user-btn">
          <span>欢迎，{{ userinfo.name }}</span>
          <el-dropdown>
            <img class="user-btn-avatar" src="../../assets/image/avatar.gif" alt="">
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="changePassword">修改密码</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </div>
    </div>
    <div class="content-container" v-if="show">
      <router-view/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, onMounted, ref, toRaw} from "vue";
import {useRouter, useRoute, onBeforeRouteUpdate} from "vue-router";
import $api from '@/api/index'
import {ElLoading} from 'element-plus'

const router = useRouter()
const route = useRoute()
const defaultMenuActive = ref('/')
const handleClick = (key: string) => {
  router.push(key)
}
const userinfo = ref({})
const show = ref(false)
onBeforeMount(() => {
  var _userinfo = localStorage.getItem('userinfo')
  var _rule = localStorage.getItem('rule')
  if (_userinfo && _userinfo !== 'undefined' && (_rule === 'ADMIN' || _rule === 'FRONT_USER')) {
    userinfo.value = JSON.parse(_userinfo)
    show.value = true
  } else {
    router.push('/admin-login')
  }
})
onMounted(() => {
  setTimeout(() => {
    defaultMenuActive.value = toRaw(route.path)
  }, 100)
})

onBeforeRouteUpdate((to, from, next) => {
      defaultMenuActive.value = to.path
      next()
    }
)

const logout = () => {
  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: '正在注销...'
  })
  $api.userApi.logout().then(res => {
    loadingInstance.close()
    localStorage.clear()
    router.push('/admin-login')
  }).catch(() => {
    loadingInstance.close()
  })

}

const changePassword = () => {
  router.push('/admin/password')
}

const menuExpand = ref(true)
const onclickExpand = () => {
  menuExpand.value = true
}

const onclickFold = () => {
  menuExpand.value = false
}


</script>

<style scoped lang="scss">
.left-menu {
  width: 200px;
  height: 100%;
  position: relative;
  transition: width 0.3s;
  overflow: hidden;
  background-color: #304156;

  &.close {
    width: 60px;
  }

}

.right-content {
  width: calc(100% - 200px);
  height: 100%;
  transition: width 0.3s;

  &.close {
    width: calc(100% - 60px);
  }
}

.header-container {
  width: 100%;
  height: 50px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  background-color: #fff;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  > .left-wrap {

  }

  > .right-wrap {
    > .user-btn {
      width: 160px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      > span {
        font-size: 14px;
        margin-right: 10px;
      }
    }


  }
}

.user-btn-avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.content-container {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
}


.el-menu-vertical-demo {
  height: 100%;
}


</style>